<%--
  Created by IntelliJ IDEA.
  User: MadFrog
  Date: 2017/6/9
  Time: 10:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>投票</title>
    <%@include file="../common/_head.jsp" %>
</head>
<body ontouchstart>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-media-box weui-media-box_text">
            <input type="hidden" id="userElectId" value=${userElect.id }>
            <h4 class="weui-media-box__title">${userElect.elect.title }</h4>
            <p class="weui-media-box__desc">${userElect.elect.description }</p>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd" id="seleted"></div>
        <div class="weui-cell__ft">
            <a href="javascript:;" id="submitButton" class="weui-btn weui-btn_mini weui-btn_primary">提交</a>
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <input class="weui-input" id="keyword" placeholder="搜索">
        </div>
        <div class="weui-cell__ft">
            <a href="javascript:;" id="searchButton" class="weui-btn weui-btn_mini weui-btn_default">搜索</a>
        </div>
    </div>
    <div class='weui-cells weui-cells_checkbox' id='electorList'>
        <%--<label class='weui-cell weui-check__label' for=''>--%>
        <%--<div class='weui-cell__hd'>--%>
        <%--<input type='checkbox' class='weui-check' name='candidate' id='' checked='checked'>--%>
        <%--<i class='weui-icon-checked'></i>--%>
        <%--</div>--%>
        <%--<div class='weui-cell__bd'>--%>
        <%--<p></p>--%>
        <%--</div>--%>
        <%--</label>--%>
    </div>
</div>
<%@include file="../common/_foot.jsp" %>
<script>
    var selectedData = [];
    var searchData;      //json
    var candidateData;
    $(document).ready(function () {
        $.ajax({
            type: "get",
            url: "${ctx}/teacher/userElect/listCandidate/${userElect.elect.id }",
            dataType: "json",
            success: function (re) {
                if (true == re.success) {
                    candidateData = re.data;
                    renderElectorList(candidateData);
                } else {
                    $.toast("后台错误，请联系管理员", "cancel");
                }
            },
            error: function (re) {
                $.toast("网络请求失败，请联系管理员", "cancel");
            }
        });
    });
    $(document).on("click", "#searchButton", function () {
        // 检查关键词
        var keyword =  $("#keyword").val().trim();
        if(keyword == null || keyword == undefined || keyword == ''){
            renderSearchElectorList(candidateData);
            return;
        }
        // 构造关键词对应的内容
        var searchData = candidateData.filter(function (item) {
            return (item.name.indexOf(keyword)!=-1);
        });
        renderSearchElectorList(searchData);

    });
    $(document).on("click", "#submitButton", function () {
        // 检查投票数量
        if(selectedData.length <${userElect.elect.electedNumber }){
            $.toptip('投票数量应为${userElect.elect.electedNumber }', 'error');
            return;
        }
        // 提交
        var userElectId = $("#userElectId").val();
        var params = {}
        var result = "";
        selectedData.forEach(function (item, index, array) {
            result += item.id + ":" + item.name + ",";
        });
        result = result.substr(0, result.length-1);
        params.result = result;
        params.userElectId = userElectId;
        $.ajax({
            type: "post",
            url: "${ctx}/teacher/userElect/vote",
            dataType: "json",
            data : params,
            success: function (re) {
                if (true == re.success) {
                    $.toast("投票成功");
                    window.location = "${ctx}/teacher/index";
                } else {
                    $.toast("后台错误，请联系管理员", "cancel");
                }
            },
            error: function (re) {
                $.toast("网络请求失败，请联系管理员", "cancel");
            }
        });
    });
    $(document).on("click", "[name='candidate']", function (event) {
        var id = (event.target.id).split("_")[1];
        var checked = event.target.checked;
        var optData = candidateData.filter(function (item) {
            return item["id"] == id;
        })[0];
        if (checked) {
            //检查数量是否超
            if (selectedData.length >=${userElect.elect.electedNumber }) {
                $.toptip('数量为${userElect.elect.electedNumber }', 'error');
                event.preventDefault();
                return;
            } else {
                selectedData.push(optData);
            }
        } else {
            selectedData = selectedData.filter(function (item) {
                return item["id"] != id;
            });
        }
        renderSelectedText(selectedData);
    });

    function renderElectorList(data) {
        var text = "";
        data.forEach(function (item, index, array) {
            var id = item.id;
            var realname = item.name;
            text += "        <label class='weui-cell weui-check__label' for='candidate_" + id + "'>\n" +
                "            <div class='weui-cell__hd'>\n" +
                "                <input type='checkbox' class='weui-check' name='candidate' id='candidate_" + id + "' value='" + id + "'>\n" +
                "                <i class='weui-icon-checked'></i>\n" +
                "            </div>\n" +
                "            <div class='weui-cell__bd'>\n" +
                "                <p>" + realname + "</p>\n" +
                "            </div>\n" +
                "        </label>"
        });
        $("#electorList").html(text);
    }

    function renderSearchElectorList(data) {
        var text = "";
        data.forEach(function (item, index, array) {

            var id = item.id;
            var realname = item.name;
            var check = "";
            selectedData.forEach(function (item, index, array) {
                if(item.id==id){
                    check = " checked='checked' "
                }
            });
            text += "        <label class='weui-cell weui-check__label' for='candidate_" + id + "'>\n" +
                "            <div class='weui-cell__hd'>\n" +
                "                <input type='checkbox' " + check + " class='weui-check' name='candidate' id='candidate_" + id + "' value='" + id + "'>\n" +
                "                <i class='weui-icon-checked'></i>\n" +
                "            </div>\n" +
                "            <div class='weui-cell__bd'>\n" +
                "                <p>" + realname + "</p>\n" +
                "            </div>\n" +
                "        </label>"
        });
        $("#electorList").html(text);
    }

    function renderSelectedText(data) {
        var str = "应投票数量${userElect.elect.electedNumber }，当前已选择：<br/>\n";
        data.forEach(function (item, index, arr) {
            str += item["name"] + "&nbsp;";
        });
        $("#seleted").html(str);
    }
</script>

</body>
</html>
